 
<div class="container-fluid">

                <!-- Page Heading -->
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">
                            Job Hour List
                        </h1>
                        <ol class="breadcrumb">
                            <li>
                                <i class="fa fa-venus-mars"></i>  <a href="#">Job Hour</a>
                            </li> 
                        </ol>
                    </div>
                </div>
                <!-- /.row -->
              
                <div class="row">
                    <div class="col-lg-10">
                        <form role="form">
                            <div class="form-group ">
                                <input placeholder ="Search" rel="manage/job_hour_search" name="search" id="search" style="width:150px;" class="form-control">
                            </div>
                        </form>

                    </div>
                    <div class="col-lg-2">
                        <form role="form">
                            <div class="form-group pull-right">
                                <a href="manage/job_hour_add" class="btn btn-sm btn-primary">Create</a>
                            </div>  
                        </form>

                    </div>
                </div>
                <!-- /.row -->

                 <div class="row">
                    <div class="col-lg-12">
                       
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover">
                                <thead>
                                    <tr>
					<th></th> 
                                        <th>No</th>
                                        <th>Name</th>
                                        <th>Note</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php  
                                    $i=0;
                                    foreach ($data->result() as $row):
                                        $i++;
                                    ?>
                                        <tr>
                                            <td  style="width:70px">
                                                    <a href="manage/job_hour_add/?id=<?php echo $row->id;?>" class="edit btn btn-default btn-xs" aria-label="Left Align">
                                                      <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
                                                    </a>
                                                    <a href="manage/job_hour_remove/?id=<?php echo $row->id;?>" class="remove btn btn-default btn-xs" data-toggle="modal" data-target=".bs-example-modal-sm" aria-label="Left Align">
                                                      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                                    </a>
                                            </td>
                                            <td class="col-md-1"><?php echo $i?></td>
                                            <td><?php echo $row->name;?></td>
                                            <td><?php echo $row->note;?></td>

                                            
                                        </tr> 
                                    	<?php
                                        endforeach;
                                        ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- /.row -->

            </div>


<!-- Small modal -->

<div class="modal fade bs-example-modal-sm" id="dialog-remove" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
           <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Remove</h4>
          </div>
          <div class="modal-body">
            <p>Are you sure to remove this records?</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            <input type="hidden" id="temp-url" />
            <button type="button" id="button-delete" class="btn btn-primary">Yes</button>
          </div>
    </div>
  </div>
</div>
			
<script type="text/javascript">
	$(document).ready(function(){
		
                removeAndEdit();
                
                $("#button-delete").click(function(){
                   
                   var removeUrl=$("#temp-url").val();
                   $.ajax({
                       url:removeUrl,
                       success:function(data)
                       {  
                           $('#page-wrapper').html(data);
                           $("#dialog-remove").modal("hide");
                          
                            refreshAjax();
                       }
                   });
                });
                
                
                $("#search").keyup(function(){
                    var url =$(this).attr('rel');
                    app.wait();
                    $.ajax({
                       url:url,
                       data:{"search":$(this).val()},
                       success:function(data)
                       {  
                           $('.table-responsive tbody').html(data); 
                           removeAndEdit();
                           app.ready();
                       }
                   });
                });
                
                
                function removeAndEdit()
                {
                    $('a.edit').click(function()
                    {
                        app.wait();
                        $.ajax({
                                url: $(this).attr('href'),
                                type: "get",
                                data:{"type":"edit"},
                                success: function(data) {   
                                    $('#page-wrapper').html(data);
                                    refreshAjax();
                                    app.ready();
                                }
                        });  
                        return false; 
                    });

                    $('a.remove').click(function(){
                        $("#temp-url").val($(this).attr('href'));
                        $("#dialog-remove").modal();
                        return false;
                    });
                }
                
 
	});
</script>